<template>
  <div class="person">
    <h3>子组件1,2：实现基本数据类型的响应式
      ,对象数据类型的响应式. </h3>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <ul>
      <li v-for="(value,key) in person.milk ">{{ value }}</li>
    </ul>
    <button @click="changName">点击修改姓名</button>
    <button @click="changAge">点击修改年龄</button>
    <button @click="changmk1">点击修改爱好1</button>
    <button @click="changmk">爱喝牛奶</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { reactive, ref, watch } from 'vue'
let person = reactive({
  name:'ycy',
  age:18,
  milk:{
    mk1:'唱',
    mk2:'跳',
    mk3:'rap'
  }
})
function changName(){
  person.name +='~'
}
function changAge(){
  person.age += 1
}
function changmk1(){
  person.milk.mk1='篮球'
}
function changmk(){
  person.milk = {
    mk1:'伊利',
    mk2:'特仑苏',
    mk3:'蒙牛'
  }
}
//监视revative修饰的对象属性，基本类型的，不能直接写对象，直接写属性，要写getter函数（箭头函数)()=>{return person.name}
watch(()=>{return person.name},(newValue,oldValue)=>{
 console.log('person的name属性变化了',newValue,oldValue)
})
//revative监视对象属性，该对象是对象属性时，不用写getter函数，默认开启深度监视
watch(person.milk,(newValue,oldValue)=>{
 console.log('person的name属性变化了',newValue,oldValue)
})
//revative监视对象属性，该对象是对象属性时，如果用getter函数获取时，要开启深度监视才能监视到
// watch(()=>{return person.milk},(newValue,oldValue)=>{
//  console.log('person的milk属性变化了',newValue,oldValue)
// },{deep:true})
</script>
